<template>
	<div>
	       <!-- 公告信息 -->
    		<div class="newsList_view">
    			<div class="news-display-container">
    				<!-- 左侧轮播区域 -->
    				<div class="news-carousel-container">
    					<el-carousel :interval="4000" type="card" height="500px" indicator-position="outside">
    						<el-carousel-item v-for="(item, index) in newsList.slice(0, 5)" :key="index">
    							<div class="news-carousel-item" @click="newsDetailClick(item)">
    								<div class="news-img">
    									<img :src="item.imgUrl" alt="">
    								</div>
    								<div class="news-content">
    									<div class="news-title">{{item.title}}</div>
    									<div class="news-intro">{{item.introduction}}</div>
    									<div class="news-time">
    										{{moment(item.addtime).format('YYYY-MM-DD')}}
    									</div>
    								</div>
    							</div>
    						</el-carousel-item>
    					</el-carousel>
    				</div>

    				<!-- 右侧横板公告列表 -->
    				<div class="news-list-container" v-if="newsList.length > 5">
    					<div class="news-list-title">最新公告</div>
    					<div class="news-item" v-for="(item, index) in newsList.slice(5, 10)" :key="index" @click="newsDetailClick(item)">
    						<div class="news-item-title">{{item.title}}</div>
    						<div class="news-item-info">
    							<div class="news-item-intro">{{ truncateText(item.introduction || '暂无简介', 60) }}</div>
    							<div class="news-item-time">{{moment(item.addtime).format('YYYY-MM-DD')}}</div>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
		<div class="home_box">

			
			<!-- 项目成果首页展示 -->
			<div class="homeList_view gradient-bg-1">
				<div class="homeList_title">
                    <span>项目成果展示</span>
                </div>
				<div class="project-display">
					<!-- 轮播区域 -->
					<div class="carousel-container">
						<el-carousel :interval="4500" type="card" height="360px" indicator-position="outside">
							<el-carousel-item v-for="(item, index) in carouselChengguoList" :key="index">
								<div class="carousel-item" @click="detailClick('xiangmuchengguo', item.id)">
									<div class="img-box">
										<img v-if="isHttp(item.tupian)" :src="item.tupian.split(',')[0]" alt="">
										<img v-else :src="item.tupian?$config.url + item.tupian.split(',')[0]:''" alt="">
									</div>
									<div class="content-box">
										<div class="title">{{item.chengguomingcheng}}</div>
										<div class="detail-text">{{ truncateText(item.chengguoxiangqing || '暂无详情', 50) }}</div>
									</div>
								</div>
							</el-carousel-item>
						</el-carousel>
					</div>
					
					<!-- 折叠列表 -->
					<div class="folded-list-container gradient-bg-2" v-if="foldedChengguoList.length > 0">
						<div class="folded-title">更多项目成果</div>
						<el-collapse accordion>
							<el-collapse-item v-for="(item, index) in foldedChengguoList" :key="index" :name="index">
								<template #title>
									<div class="collapse-title">{{item.chengguomingcheng}}</div>
								</template>
								<div class="collapse-content" @click="detailClick('xiangmuchengguo', item.id)">
									<div class="collapse-img">
										<img v-if="isHttp(item.tupian)" :src="item.tupian.split(',')[0]" alt="">
										<img v-else :src="item.tupian?$config.url + item.tupian.split(',')[0]:''" alt="">
									</div>
									<div class="collapse-info">
										<div class="collapse-detail">{{ truncateText(item.chengguoxiangqing || '暂无详情', 100) }}</div>
										<div>点击查看详情</div>
									</div>
								</div>
							</el-collapse-item>
						</el-collapse>
					</div>
				</div>
			</div>
			
			<!-- 项目信息首页展示 -->
			<div class="homeList_view">
				<div class="homeList_title">
                    <span>项目信息展示</span>
                </div>
				<div class="project-display">
					<!-- 轮播区域 -->
					<div class="carousel-container">
						<el-carousel :interval="4500" type="card" height="360px" indicator-position="outside">
							<el-carousel-item v-for="(item, index) in carouselXinxiList" :key="index">
								<div class="carousel-item" @click="detailClick('xiangmuxinxi', item.id)">
									<div class="img-box">
										<img v-if="isHttp(item.xiangmutupian)" :src="item.xiangmutupian.split(',')[0]" alt="">
										<img v-else :src="item.xiangmutupian?$config.url + item.xiangmutupian.split(',')[0]:''" alt="">
									</div>
									<div class="content-box">
										<div class="title">项目名称：{{item.xiangmumingcheng}}</div>
										<div class="subtitle">项目阶段：{{item.xiangmujieduan}}</div>
										<div class="detail-text">{{ truncateText(item.xiangmuxiangqing || '暂无详情', 50) }}</div>
									</div>
								</div>
							</el-carousel-item>
						</el-carousel>
					</div>
					
					<!-- 折叠列表 -->
					<div class="folded-list-container gradient-bg-4" v-if="foldedXinxiList.length > 0">
						<div class="folded-title">更多项目信息</div>
						<el-collapse accordion>
							<el-collapse-item v-for="(item, index) in foldedXinxiList" :key="index" :name="index">
								<template #title>
									<div class="collapse-title">{{item.xiangmumingcheng}}</div>
								</template>
								<div class="collapse-content" @click="detailClick('xiangmuxinxi', item.id)">
									<div class="collapse-img">
										<img v-if="isHttp(item.xiangmutupian)" :src="item.xiangmutupian.split(',')[0]" alt="">
										<img v-else :src="item.xiangmutupian?$config.url + item.xiangmutupian.split(',')[0]:''" alt="">
									</div>
									<div class="collapse-info">
										<div>阶段：{{item.xiangmujieduan}}</div>
										<div class="collapse-detail">{{ truncateText(item.xiangmuxiangqing || '暂无详情', 100) }}</div>
										<div>点击查看详情</div>
									</div>
								</div>
							</el-collapse-item>
						</el-collapse>
					</div>
				</div>
			</div>
		</div>
		<formModel ref="newsFormModelRef"></formModel>
	</div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue';
import moment from 'moment';
import { useRouter } from 'vue-router';
import formModel from './news/formModel';

const context = getCurrentInstance()?.appContext.config.globalProperties;
const router = useRouter();

// 项目成果首页数据
const xiangmuchengguoHomeList = ref([]);
// 项目信息首页数据
const xiangmuxinxiHomeList = ref([]);
// 公告信息数据
const newsList = ref([]);
// 公告弹窗引用
const newsFormModelRef = ref(null);

// 轮播展示的项目成果
const carouselChengguoList = ref([]);
// 横板展示的项目成果
const foldedChengguoList = ref([]);
// 轮播展示的项目信息
const carouselXinxiList = ref([]);
// 横板展示的项目信息
const foldedXinxiList = ref([]);

// 初始化
onMounted(() => {
  init();
});

// 随机打乱数组
const shuffleArray = (array) => {
  const newArray = [...array];
  for (let i = newArray.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
  }
  return newArray;
};

// 初始化方法
const init = () => {
  getXiangmuchengguoHomeList();
  getXiangmuxinxiHomeList();
  getNewsList();
};

// 获取项目成果
const getXiangmuchengguoHomeList = () => {
  context?.$http({
    url: 'xiangmuchengguo/list',
    method: 'get',
    params: {
      page: 1,
      limit: 10000000,
      sort: 'id',
      order: 'desc'
    }
  }).then(res => {
    if (res.data.code === 0) {
      xiangmuchengguoHomeList.value = res.data.data.list;
      processImages(xiangmuchengguoHomeList.value, 'tupian');
      
      // 随机打乱项目成果列表
      const shuffledList = shuffleArray(xiangmuchengguoHomeList.value);
      
      // 取前5个作为轮播展示
      carouselChengguoList.value = shuffledList.slice(0, 5);
      
      // 从剩余项目中取5个作为横板展示
      foldedChengguoList.value = shuffledList.slice(5, 10);
    }
  });
};

// 获取项目信息
const getXiangmuxinxiHomeList = () => {
  context?.$http({
    url: 'xiangmuxinxi/list',
    method: 'get',
    params: {
      page: 1,
      limit: 1000000,
      sort: 'id',
      order: 'desc',
      sfsh: '是' // 添加审核状态过滤条件，只获取已审核通过的项目
    }
  }).then(res => {
    if (res.data.code === 0) {
      xiangmuxinxiHomeList.value = res.data.data.list;
      // 再次确保过滤掉未审核通过的项目（双重保险）
      xiangmuxinxiHomeList.value = xiangmuxinxiHomeList.value.filter(item => item.sfsh === '是');
      processImages(xiangmuxinxiHomeList.value, 'xiangmutupian');
      
      // 随机打乱项目信息列表
      const shuffledList = shuffleArray(xiangmuxinxiHomeList.value);
      
      // 取前5个作为轮播展示
      carouselXinxiList.value = shuffledList.slice(0, 5);
      
      // 从剩余项目中取5个作为横板展示
      foldedXinxiList.value = shuffledList.slice(5, 10);
    }
  });
};

// 获取公告信息
const getNewsList = () => {
  context?.$http({
    url: 'news/list',
    method: 'get',
    params: {
      page: 1,
      limit: 10
    }
  }).then(res => {
    if (res.data.code === 0) {
      newsList.value = res.data.data.list;
      processNewsImages(newsList.value);
    }
  });
};

// 处理图片路径
const processImages = (list, field) => {
  list.forEach(item => {
    if (item[field] && !isHttp(item[field])) {
      item.imgUrls = item[field].split(',').map(img => context.$config.url + img);
    }
  });
};

// 处理新闻图片
const processNewsImages = (list) => {
  list.forEach(item => {
    if (item.picture && !isHttp(item.picture)) {
      item.imgUrl = context.$config.url + item.picture.split(',')[0];
    }
  });
};

// 判断是否为HTTP链接
const isHttp = (url) => {
  return url && url.substr(0, 4) === 'http';
};

// 查看详情
const detailClick = (table, id) => {
  router.push(`/index/${table}Detail?id=${id}`);
};

// 查看更多
const moreClick = (table) => {
  router.push(`/index/${table}List`);
};

// 查看公告详情
const newsDetailClick = (item) => {
  if (item?.id) {
    newsFormModelRef.value.init(item.id);
  }
};

// 截断文本
const truncateText = (text, maxLength) => {
  if (!text) return '暂无详情';
  
  // 去除HTML标签
  const cleanText = text.replace(/<\/?[^>]+(>|$)/g, "");
  
  if (cleanText.length > maxLength) {
    return cleanText.slice(0, maxLength) + '...';
  }
  return cleanText;
};
</script>

<style lang="scss">
	.home_box {
		display: flex;
		flex-direction: column;
		background: #fff;
		position: relative;
		overflow: hidden;
	}

	.home_box::before {
		content: none;
	}

	.home_box > * {
		position: relative;
		z-index: 1;
	}

	.homeList_view {
		order: 4;
	}

	.aboutUs_view {
		order: 5;
	}

	.recomList_view {
		order: 3;
	}

	.friendLink {
		order: 7;
	}

	.newsList_view {
		order: 2;
	}

	.systemInfo_view {
		order: 6;
	}

	.onlineMessage {
		order: 8;
	}
	/* 总盒子 */
	.homeList_view{
		width: 100%;
		margin:0px auto;
		padding: 40px 40px 40px 40px;
		overflow: hidden;
		position:relative;
		z-index: 1;
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
		background: transparent;
	}

	.homeList_view .homeList_title {
		display: flex;
		justify-content: space-between;
		margin-top: 0;
		margin-bottom: 60px;
		width: 8800px;
		font-size: 28px;
		color: #023F7A;
		line-height: 54px;
		padding-left: 180px;
		height: 60px;
	}
	.first-home-list-view .homeList_title {
    margin-top: 40px;
}

	.homeList_view .homeList {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		gap: 30px 25px;
	}

	.homeList_view .homeList_more_view {
		position: absolute;
		right: calc(50% - 600px);
		background: url(http://clfile.zggen.cn/20250121/086ada7509904f1a81d40b02ba19bcb3.webp);
		background-size: 100% 100%;
		width: 210px;
		line-height: 60px;
		text-align: center;
		color: var(--theme);
		font-size: 18px;
	}

	.homeList_view .item {
		border-radius: 12px;
		background: rgba(255, 255, 255, 0.85);
		border: 1px solid rgba(173, 216, 255, 0.5);
		padding: 10px;
		box-shadow: 0px 3px 12px rgba(107, 172, 235, 0.2);
		transition: all 0.3s ease;
		backdrop-filter: blur(3px);
	}

	.homeList_view .item:hover {
		transform: translateY(-5px);
		box-shadow: 0px 8px 20px rgba(107, 172, 235, 0.3);
		background: rgba(255, 255, 255, 0.95);
	}

	.homeList_view img {
		width: 200px;
		height: 240px;
		border-radius: 8px;
		object-fit: cover;
		transition: all 0.4s ease;
	}

	.homeList_view .item:hover img {
		transform: scale(1.03);
	}

	.homeList_view .title {
		border-radius: 8px;
		background: var(--theme1);
		color: #fff;
		padding: 0 12px;
		line-height: 40px;
		margin-top: 10px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 200px;
		box-shadow: 0 2px 8px rgba(2, 63, 122, 0.2);
	}

	.homeList_view .item:nth-child(5) {
		border-radius: 50px;
		overflow: hidden;
	}

	.homeList_view .item:nth-child(5) img {
		border-radius: 40px 0px 0px 40px;
	}

	.homeList_view .item:nth-child(5) .title {
		border-radius: 40px 0px 0px 40px;
	}
	.newsList_view {
		background-position: 30% 0,30% 0;
		padding: 1.5vw calc(50% - 49vw) 3.5vw;
		position: relative;
		z-index: 10;
		/* 响应式大小参数 */
		width: 98vw;
		height: 45vh;
		max-width: 1600px;
		max-height: 640px;
		min-width: 800px;
		min-height: 640px;
		box-sizing: border-box;
		/* 磨砂圆角玻璃白透样式效果 */
		background: rgba(255, 255, 255, 0.15);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border-radius: 24px;
		border: 1px solid rgba(255, 255, 255, 0.3);
		box-shadow: 0 8px 32px rgba(107, 172, 235, 0.15), 
					0 4px 16px rgba(255, 255, 255, 0.1) inset;
		margin: calc(-9vh - 81px) auto 1.5vh;
		transform: translateX(-8px);
		overflow: visible;
	}

	.newsList_view .title-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.newsList_view .title-row .title {
		background: url(http://clfile.zggen.cn/20250121/31e86abd78bd43c8a709b379e8353ee7.webp);
		background-size: 100% 100%;
		width: 8800px;
		font-size: 28px;
		color: #023F7A;
		line-height: 54px;
		padding-left: 40px;
		height: 60px;
	}

	.newsList_view .more {
		background: url(http://clfile.zggen.cn/20250121/086ada7509904f1a81d40b02ba19bcb3.webp);
		background-size: 100% 100%;
		width: 210px;
		line-height: 60px;
		text-align: center;
		color: var(--theme);
		font-size: 18px;
	}

	.newsList_view .list {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		align-items: flex-start;
	}

	.newsList_view .left {
		flex: 1;
		min-width: 0;
		max-width: 100%;
	}

	.newsList_view .right {
		width: auto;
		min-width: 300px;
		max-width: 560px;
		flex: 0 0 auto;
		display: flex;
		flex-direction: column;
		row-gap: 20px;
		margin-left: 20px;
	}

	.newsList_view .intro {
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		color: rgba(121, 121, 121, 1);
	}

	.newsList_view .item1 .intro {
		-webkit-line-clamp: 3;
	}

	.newsList_view img {
		width: 100%;
		height: 410px;
		object-fit: cover;
		border-radius: 0 30px 0 0;
	}

	.newsList_view .item0 .info {
		position: absolute;
		bottom: 0;
		width: 100%;
		display: flex;
		color: #fff;
		line-height: 60px;
		background: var(--theme);
		border-radius: 0 30px 0  0;
	}

	.newsList_view .item0 {
		position: relative;
	}

	.newsList_view .item0 .title {width: 388px;background: var(--theme1);border-radius: 0 30px 0 0;padding: 0 10px;}

	.newsList_view .item0 .time {
		flex: 1;
		text-align: center;
		color: #fff;
	}

	.newsList_view .item1 {
		margin-top: 30px;
	}

	.newsList_view .item1 .title {
		padding-bottom: 20px;
		position: relative;
		margin-bottom: 20px;
	}

	.newsList_view .title {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.newsList_view .item1 .title:after {
		position: absolute;
		content: '';
		width: 433px;
		height: 10px;
		background: linear-gradient(90deg, #8AC6FF 0%, rgba(127, 192, 255, 0) 100%);
		bottom: 0;
		left: 0;
	}

	.newsList_view .time {
		color: var(--theme);
	}

	.newsList_view .item1 .time {
		margin-top: 20px;
	}

	.newsList_view .item2 {
		display: flex;
		background: #FFFFFF;
		box-shadow: 0px 2px 10px 0px rgba(127,192,255,0.5);
		border-radius: 75px 75px 75px 75px;
		padding: 15px;
	}

	.newsList_view .item2 .time {
		width: 100px;
		height: 100px;
		background: linear-gradient( 90deg, #7FC0FF 0%, rgba(255,255,255,0) 100%);
		flex-shrink: 0;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size: 16px;
		margin-right: 10px;
	}

	.newsList_view .item2 .year {
		font-size: 20px;
	}

	.newsList_view .item2 .intro {
		margin-top: 20px;
	}



	/* 新增轮播公告样式 */
	.news-carousel-container {
		width: 100%;
		margin: 0 auto;
		padding: 15px 0 40px;
		position: relative;
	}

	.news-carousel-container::before {
		content: "";
		position: absolute;
		top: 0;
		left: -5%;
		right: -5%;
		bottom: 0;
		background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.3), transparent 70%);
		z-index: 0;
		pointer-events: none;
	}

	.news-carousel-item {
		height: 500px;
		background-color: rgba(255, 255, 255, 0.6);
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0px 2px 15px 0px rgba(107, 172, 235, 0.2);
		cursor: pointer;
		transition: all 0.3s;
		display: flex;
		flex-direction: column;
		backdrop-filter: blur(8px);
		border: 1px solid rgba(255, 255, 255, 0.4);
	}

	.news-carousel-item:hover {
		transform: translateY(-5px);
		box-shadow: 0px 8px 20px 0px rgba(107, 172, 235, 0.5);
		background-color: rgba(255, 255, 255, 0.95);
	}

	.news-img {
		height: 320px;
		overflow: hidden;
	}

	.news-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: all 0.5s;
	}

	.news-carousel-item:hover .news-img img {
		transform: scale(1.05);
	}

	.news-content {
		flex: 1;
		padding: 20px;
		display: flex;
		flex-direction: column;
	}

	.news-title {
		font-size: 18px;
		font-weight: bold;
		color: #023F7A;
		margin-bottom: 10px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.news-intro {
		flex: 1;
		font-size: 14px;
		color: #666;
		line-height: 1.6;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.news-time {
		font-size: 14px;
		color: var(--theme);
		text-align: right;
		margin-top: 10px;
	}

	/* 自定义轮播指示器样式 */
	.newsList_view :deep(.el-carousel__indicators) {
		bottom: -30px;
	}

	.newsList_view :deep(.el-carousel__indicator) {
		padding: 12px 4px;
	}

	.newsList_view :deep(.el-carousel__indicator--horizontal .el-carousel__button) {
		width: 30px;
		height: 4px;
		border-radius: 2px;
		background-color: rgba(127,192,255,0.4);
	}

	.newsList_view :deep(.el-carousel__indicator.is-active .el-carousel__button) {
		background-color: var(--theme);
	}

	/* 自定义卡片轮播样式 */
	.newsList_view :deep(.el-carousel--card .el-carousel__item) {
		border-radius: 8px;
	}

	.newsList_view :deep(.el-carousel__item--card) {
		border-radius: 8px;
	}

	.newsList_view :deep(.el-carousel__item--card.is-active) {
		transform: translateY(-10px) scale(1.05);
		z-index: 2;
	}

	/* 公告区域新布局样式 */
	.news-display-container {
		display: flex;
		width: 100%;
		gap: 20px;
		align-items: flex-start;
		height: calc(100% - 99px);
		margin-top: 20px;
	}

	.news-carousel-container {
		width: 80%;
		height: 85%;
		max-width: 1000px;
		max-height: 500px;
		min-width: 400px;
		min-height: 300px;
		position: relative;
	}

	.news-list-container {
		width: 18%;
		height: 90%;
		max-width: 300px;
		max-height: 460px;
		min-width: 300px;
		min-height: 350px;
		background-color: rgba(255, 255, 255, 0.4);
		border-radius: 12px;
		overflow: auto;
		padding: 1vw;
		box-shadow: 0px 2px 10px rgba(107, 172, 235, 0.15);
		backdrop-filter: blur(8px);
		border: 1px solid rgba(255, 255, 255, 0.3);
		display: flex;
		flex-direction: column;
	}

	.news-list-title {
		font-size: 18px;
		font-weight: bold;
		color: #023F7A;
		margin-bottom: 15px;
		border-left: 4px solid var(--theme);
		padding-left: 10px;
		position: sticky;
		top: 0;
		background-color: rgba(255, 255, 255, 0.8);
		z-index: 1;
		padding-top: 5px;
		padding-bottom: 5px;
	}

	.news-item {
		padding: 12px;
		margin-bottom: 10px;
		border-radius: 8px;
		background-color: rgba(255, 255, 255, 0.8);
		cursor: pointer;
		transition: all 0.3s;
		border: 1px solid rgba(173, 216, 255, 0.3);
	}

	.news-item:last-child {
		margin-bottom: 0;
	}

	.news-item:hover {
		background-color: rgba(236, 245, 255, 0.9);
		transform: translateY(-3px);
		box-shadow: 0px 3px 10px rgba(107, 172, 235, 0.3);
	}

	.news-item-title {
		font-size: 16px;
		font-weight: 600;
		color: #023F7A;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 5px;
	}

	.news-item-info {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.news-item-intro {
		font-size: 14px;
		color: #666;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		line-height: 1.5;
	}

	.news-item-time {
		font-size: 12px;
		color: var(--theme);
		margin-left: 10px;
		white-space: nowrap;
	}

	/* 自定义滚动条样式 */
	.news-list-container::-webkit-scrollbar {
		width: 6px;
	}

	.news-list-container::-webkit-scrollbar-thumb {
		background-color: rgba(107, 172, 235, 0.5);
		border-radius: 3px;
	}

	.news-list-container::-webkit-scrollbar-track {
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 3px;
	}

	/* 调整轮播区域样式 */
	.news-carousel-container {
		padding: 0;
	}

	.news-carousel-container::before {
		left: -10%;
		right: -10%;
	}


</style>

<style>
/* 项目展示共用样式 */
.project-display {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto 20px auto;
	display: flex;
	flex-direction: column;
}

.carousel-container {
	width: 100%;
	margin-bottom: 20px;
	position: relative;
}

.carousel-container::before {
	content: "";
	position: absolute;
	top: 0;
	left: -5%;
	right: -5%;
	bottom: 0;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.6), transparent 70%);
	z-index: 0;
	pointer-events: none;
}

.carousel-item {
	height: 360px;
	background-color: rgba(255, 255, 255, 0.85);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0px 2px 15px 0px rgba(107, 172, 235, 0.3);
	cursor: pointer;
	transition: all 0.3s;
	display: flex;
	flex-direction: column;
	backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.7);
}

.carousel-item:hover {
	transform: translateY(-5px);
	box-shadow: 0px 8px 20px 0px rgba(107, 172, 235, 0.5);
	background-color: rgba(255, 255, 255, 0.95);
}

.carousel-item .img-box {
	height: 260px;
	overflow: hidden;
}

.carousel-item .img-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.5s;
}

.carousel-item:hover .img-box img {
	transform: scale(1.05);
}

.carousel-item .content-box {
	padding: 15px;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.carousel-item .title {
	font-size: 18px;
	font-weight: bold;
	color: #023F7A;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 5px;
	border-radius: 0;
	background: transparent;
	line-height: 1.5;
	box-shadow: none;
	padding: 0;
	width: auto;
}

.carousel-item .subtitle {
	font-size: 14px;
	color: #666;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.carousel-item .detail-text {
	font-size: 14px;
	color: #666;
	line-height: 1.6;
	margin-top: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* 自定义轮播指示器样式 */
.homeList_view :deep(.el-carousel__indicators) {
	bottom: -25px;
}

.homeList_view :deep(.el-carousel__indicator) {
	padding: 12px 4px;
}

.homeList_view :deep(.el-carousel__indicator--horizontal .el-carousel__button) {
	width: 30px;
	height: 4px;
	border-radius: 2px;
	background-color: rgba(127,192,255,0.4);
}

.homeList_view :deep(.el-carousel__indicator.is-active .el-carousel__button) {
	background-color: var(--theme);
}

/* 自定义卡片轮播样式 */
.homeList_view :deep(.el-carousel--card .el-carousel__item) {
	border-radius: 12px;
}

.homeList_view :deep(.el-carousel__item--card) {
	border-radius: 12px;
}

.homeList_view :deep(.el-carousel__item--card.is-active) {
	transform: translateY(-10px) scale(1.05);
	z-index: 2;
}

/* 折叠列表样式 */
.folded-list-container {
	width: 98%;
	max-width: 1400px;
	margin: 40px auto 0 auto;
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 12px;
	overflow: hidden;
	padding: 15px 30px;
	box-shadow: 0px 2px 10px rgba(107, 172, 235, 0.2);
	backdrop-filter: blur(3px);
}

.folded-title {
	font-size: 20px;
	font-weight: bold;
	color: #023F7A;
	margin-bottom: 15px;
	border-left: 4px solid var(--theme);
	padding-left: 10px;
}

.homeList_view :deep(.el-collapse) {
	border: none;
	background-color: transparent;
}

.homeList_view :deep(.el-collapse-item) {
	margin-bottom: 8px;
}

.homeList_view :deep(.el-collapse-item__header) {
	background-color: rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(173, 216, 255, 0.5);
	border-radius: 8px !important;
	padding: 0 15px;
	height: 50px;
	font-size: 16px;
	color: #023F7A;
	transition: all 0.3s;
}

.homeList_view :deep(.el-collapse-item__header:hover) {
	background-color: rgba(236, 245, 255, 0.9);
}

.homeList_view :deep(.el-collapse-item__wrap) {
	background-color: transparent;
	border: none;
}

.homeList_view :deep(.el-collapse-item__content) {
	padding: 15px 0;
}

.collapse-title {
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.collapse-content {
	display: flex;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 8px;
	padding: 10px;
	cursor: pointer;
	transition: all 0.3s;
}

.collapse-content:hover {
	background-color: rgba(236, 245, 255, 0.9);
	transform: translateY(-3px);
	box-shadow: 0px 3px 10px rgba(107, 172, 235, 0.3);
}

.collapse-img {
	width: 100px;
	height: 100px;
	overflow: hidden;
	border-radius: 8px;
}

.collapse-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.3s;
}

.collapse-content:hover .collapse-img img {
	transform: scale(1.05);
}

.collapse-info {
	flex: 1;
	margin-left: 15px;
	color: #666;
}

.collapse-info div:last-child {
	margin-top: 5px;
	color: var(--theme);
	font-size: 14px;
}

.collapse-detail {
	font-size: 14px;
	color: #555;
	line-height: 1.6;
	margin: 8px 0;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
</style>

<style>
/* 更多按钮样式 */
.more-buttons-row {
	display: flex;
	justify-content: center;
	gap: 50px;
	margin-top: 38px;
	margin-bottom: 20px;
	position: relative;
	padding: 18px 0;
	flex-wrap: wrap;
	width: 1100px;
	height: 79px;
}

.hello-world-text {
	position: absolute;
	top: -24px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #0257A5;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(107, 172, 235, 0.3);
	letter-spacing: 1px;
	transform: translateY(0);
	animation: float 3s ease-in-out infinite;
	width: 1100px;
	height: 30px;
}

@keyframes float {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-5px);
	}
	100% {
		transform: translateY(0);
	}
}

.more-buttons-row::before {
		content: "";
		position: absolute;
		top: 0;
		left: 10%;
		right: 10%;
		height: 100%;
		background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.3), transparent 70%);
		z-index: 0;
		pointer-events: none;
	}

.more-button {
		padding: 12px 28px;
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(230, 240, 255, 0.6));
		border-radius: 30px;
		cursor: pointer;
		transition: all 0.3s ease;
		box-shadow: 0 4px 12px rgba(107, 172, 235, 0.2), 0 1px 3px rgba(0, 80, 170, 0.1), inset 0 1px 2px rgba(255, 255, 255, 0.4);
		border: 1px solid rgba(137, 196, 255, 0.4);
		position: relative;
		overflow: hidden;
		z-index: 1;
		backdrop-filter: blur(10px);
	}

.more-button::after {
	content: "";
	position: absolute;
	top: 0;
	left: -50%;
	width: 150%;
	height: 40%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
	transform: rotate(-15deg) translateY(-100%);
	transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
	z-index: 2;
	pointer-events: none;
}

.more-button:hover::after {
	transform: rotate(-15deg) translateY(400%);
}

.more-button span {
	font-size: 16px;
	font-weight: bold;
	color: #0257A5;
	position: relative;
	z-index: 3;
}

.more-button:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(107, 172, 235, 0.5), 0 2px 5px rgba(0, 80, 170, 0.3), inset 0 1px 3px rgba(255, 255, 255, 0.8);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(217, 234, 255, 0.9));
	border-color: rgba(100, 180, 255, 0.8);
}

.more-button:active {
	transform: translateY(-2px);
	box-shadow: 0 5px 10px rgba(107, 172, 235, 0.4), 0 1px 3px rgba(0, 80, 170, 0.3);
}


</style>

<style>
/* 渐变背景样式 */
.gradient-bg-1 {
    background: linear-gradient(90deg, #f8fbff 0%, #e6f0ff 100%) !important;
}
.gradient-bg-2 {
    background: linear-gradient(90deg, #fff7f0 0%, #ffe7e0 100%) !important;
}
.gradient-bg-3 {
    background: linear-gradient(90deg, #f7fff8 0%, #e0fff3 100%) !important;
}
.gradient-bg-4 {
    background: linear-gradient(90deg, #f9f7ff 0%, #e7e0ff 100%) !important;
}
</style>